<template>
	<div class="guidebox">
		<img src="../../static/image/camera.png" class="loadimg" />
		<div class="op">
			<img src="../../static/image/backcamera.png" class="opimage" @click="closeGuideBoxView" />
			<img src="../../static/image/changecamera.png" class="opimage" @click="switchCameraReplaceStream()" />
		</div>
	</div>
</template>
<script>
export default {
	props: {},
	data() {
		return {};
	},
	created() {},
	mounted() {},
	methods: {
		//关闭引导框视图
		closeGuideBoxView() {
			this.$emit('closeGuideBoxView');
		},
		//切换摄像头
		switchCameraReplaceStream() {
			this.$emit('switchCameraReplaceStream');
		}
	}
};
</script>
<style scoped>
.loadimg {
	position: absolute;
	width: 80%;
	height: 80%;
	z-index: 2;
	top: 5%;
	left: 10%;
	object-fit: contain;
	z-index: 8;
}
.op {
	position: absolute;
	width: 100%;
	height: 50px;
	bottom: 10px;
	left: 0px;
	display: flex;
	z-index: 20;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
}
.opimage {
	width: 50px;
	height: 50px;
}
</style>
